<template>
    <div class="sale-out-depot-box">
        <!--      查询表单 -->
        <div class="search-form">
            <el-form :inline="true" class="demo-form-inline" size="mini" ref="searchForm" :model="searchParams">


                <el-form-item label="销售出库订单号" prop="id">
                    <el-input placeholder="请输入订单编号" v-model="searchParams.id"></el-input>
                </el-form-item>

                <el-form-item label="订单类型" prop="indentType">
                    <!--动态渲染  选择订单类型-->
                    <el-select v-model="searchParams.indentType" placeholder="选择订单类型">
                        <el-option
                            v-for="item in types"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="支付方式" prop="payType">
                    <el-select v-model="searchParams.payType" placeholder="选择订单类型">
                        <el-option
                            v-for="item in payTypes"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="会员账号" prop="vipNumber">
                    <el-input placeholder="请输入会员账号" v-model="searchParams.vipNumber"></el-input>
                </el-form-item>


                <el-form-item label="订单状态" prop="sodStatus">
                    <el-select v-model="searchParams.sodStatus" placeholder="选择订单类型">
                        <el-option
                            v-for="item in sodState"
                            :value="item.key"
                            :label="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="订单日期">
                    <el-date-picker
                        style="width: 240px"
                        type="datetimerange"

                        @change="paramsTimeChange"
                        v-model="searchTimes"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        align="left">
                    </el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="searchPage">查询</el-button>
                    <el-button type="warning" @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!--    表格数据-->
        <div class="data-box">
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    @selection-change="selectChange">
                <el-table-column
                    align="center"
                    type="selection"
                    width="55">
                </el-table-column>

                <el-table-column
                    type="index"
                    width="55"
                    label="序号">
                </el-table-column>

                <el-table-column
                    align="center"
                    prop="id"
                    label="销售出库订单编号"
                    width="180">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="indentType"
                    label="订单类型"
                    width="180">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="payType"
                    label="支付方式"
                    width="180">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="vipNumber"
                    label="会员账号"
                    width="180">
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="sodStatus"
                    label="订单状态"
                    width="180">
                </el-table-column>

                <el-table-column
                    align="center"
                    prop="sodTime"
                    label="订单日期"
                    width="180">
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <router-link :to="{path:'/sale-out-depot-detail',query:{sodId:scope.row.id}}">
                            <el-button type="primary" size="mini" icon="el-icon-edit">查看</el-button>
                        </router-link>
                        <router-link :to="{path:'/sale-out-depot-detail',query:{sodId:scope.row.id}}">
                            <el-button  type="danger" size="mini" icon="el-icon-s-home" :disabled="scope.row.sodStatus==='已出库'">出库</el-button>
                        </router-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--    分页-->
        <div class="page-box">
            <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="searchParams.pageSize"
                :current-page="searchParams.currentPage"
                @current-change="currentPageChange"
            >
            </el-pagination>
        </div>

    </div>
</template>

<script>
    import brand from "./index";

    export default brand;
</script>

<style scoped>

</style>